import React, { Component } from 'react';
import { Form, Row, Col, Icon } from 'antd';
import ShowType from '../../../routes/common/showType';
import * as commonFunc from '../../Common/commonFunc';
import styles from '../../../index.less';
import * as config from '../../../utils/config';

const FormItem = Form.Item;

class TabProbablyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sTabId: props.app.currentPane.key, /* 当前标签 */
      componentName: props.componentName, /* 组件名 */
      masterConfig: props.masterConfig, /* 配置 */
      sId: props.sId, /* 业务数据Id */
      dataList: [], /* 数据 */
      sActiveId: props.sActiveId, /* 窗体Id */
      disabled: props.disabled, /* 是否是查看状态 */
      sParentId: '', /* 工序分类 */
      sProcessNo: '', /* 工序编号 */
      sProcessName: '', /* 工序名称 */
      sQuotationFormulaId: '', /* 计价方式 */
      sWorkCenterId: '', /* 工作中心 */
      sCostFormulaId: '', /* 对应标准成本 */
      sProcessShort: '', /* 拼版名称 */
      sProcessUnit: '', /* 计价单位 */
      iOrder: 0, /* 序号 */
      sProductionPaperFormulaId: '', /* 工单放单设定公式 */
      sQuotationPaperFormulaId: '', /* 报价放单设定公式 */
      bProduction: false, /* 生产工艺 */
      bQuotation: false, /* 报价工艺 */
      bAutoArrange: false, /* 自动排程 */
      reserveContent: '',
      expand: false,
    };
  }

  componentWillMount() {
    /* 获取主表数据 */
    const {
      masterConfig, sActiveId, sId, componentName, sTabId,
    } = this.state;
    const { dispatch } = this.props;
    if (sId !== undefined && sId !== '') {
      const mainId = masterConfig.sId;
      /* 表Id */
      const value = { sId, pageSize: '', pageNum: '' };
      /* 业务数据Id */
      const dataUrl = `${config.server_host}business/getBusinessDataByFormcustomId/${mainId}?sModelsId=${sActiveId}`;
      dispatch({
        type: 'content/getUrlPostData',
        payload: {
          url: dataUrl, sTabId, componentName, value, formRoute: '/eleprocess', returnType: 'data',
        },
      });
      /* 获取主表数据 */
    } else if (sId === '' && this.props.newIdFlag) {
      const url = `${config.server_host}getUuid/${this.props.newIdlength}`;
      dispatch({
        type: 'content/getCopyDataId',
        payload: {
          sTabId, url, formRoute: '/eleprocess', componentName,
        },
      });
    }
    if (masterConfig.gdsconfigformslave !== undefined) {
      const mainConfig = masterConfig.gdsconfigformslave;
      this.setState({
        sId: sId !== undefined ? sId : '',
        sParentId: mainConfig.filter(item => (item.sName.toLowerCase() === 'sparentid'))[0],
        sProcessNo: mainConfig.filter(item => (item.sName.toLowerCase() === 'sprocessno'))[0],
        sProcessName: mainConfig.filter(item => (item.sName.toLowerCase() === 'sprocessname'))[0],
        sQuotationFormulaId: mainConfig.filter(item => (item.sName.toLowerCase() === 'squotationformulaid'))[0],
        sWorkCenterId: mainConfig.filter(item => (item.sName.toLowerCase() === 'sworkcenterid'))[0],
        sCostFormulaId: mainConfig.filter(item => (item.sName.toLowerCase() === 'scostformulaid'))[0],
        sProcessShort: mainConfig.filter(item => (item.sName.toLowerCase() === 'sprocessshort'))[0],
        sProcessUnit: mainConfig.filter(item => (item.sName.toLowerCase() === 'sprocessunit'))[0],
        iOrder: mainConfig.filter(item => (item.sName.toLowerCase() === 'iorder'))[0],
        sProductionPaperFormulaId: mainConfig.filter(item => (item.sName.toLowerCase() === 'sproductionpaperformulaid'))[0],
        sQuotationPaperFormulaId: mainConfig.filter(item => (item.sName.toLowerCase() === 'squotationpaperformulaid'))[0],
        bProduction: mainConfig.filter(item => (item.sName.toLowerCase() === 'bproduction'))[0],
        bQuotation: mainConfig.filter(item => (item.sName.toLowerCase() === 'bquotation'))[0],
        bAutoArrange: mainConfig.filter(item => (item.sName.toLowerCase() === 'bautoarrange'))[0],
      });
    }
  }

  componentWillReceiveProps(nextProps) {
    const {
      sId, disabled, content, dataSet,
    } = nextProps;
    const { dataList } = content;
    const {
      sDataListTabId, returnType, urlData, loading, componentName,
    } = dataList;
    this.setState({ disabled, dataList: dataSet });
    if (this.state.sTabId === sDataListTabId && this.state.sTabId === nextProps.app.currentPane.key
      && this.state.componentName === componentName) {
      if (loading) return;
      if (returnType === 'data') {
        this.setState({
          dataList: urlData,
          sId: sId !== undefined ? sId : '',
        });
      }
      this.setState({ sId });
    }
    const mainConfig = this.state.masterConfig.gdsconfigformslave;
    if (Object.keys(mainConfig).length > 0) {
      const { sActiveId, app, form } = nextProps;
      const childProps = {
        app, form, sActiveId, sId, dataList, disabled,
      };
      const reserveContent = commonFunc.Reserve(mainConfig, childProps);
      this.setState({ reserveContent });
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    const { componentName } = nextProps;
    const { sId } = this.props;
    if (sId === undefined) {
      return true;
    }
    let flag = true;
    if (nextState.disabled !== this.state.disabled) {
      return true;
    }
    if (this.state.sTabId === nextProps.app.currentPane.key &&
      this.state.componentName === componentName) {
      flag = true;
    } else {
      flag = false;
    }
    return flag;
  }

  handleToggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
  };

  render() {
    const halfformItemLayout = { labelCol: { span: 12 }, wrapperCol: { span: 10 } };
    const rightformItemLayout = { labelCol: { span: 12 }, wrapperCol: { span: 9 } };
    const checkformItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } };
    const {
      app, form, handleModalPane, dataName, dataType, handleSelectChange, onClose,
    } = this.props;
    const {
      dataList, sId, sActiveId, disabled, reserveContent, expand,
    } = this.state;
    const childProps = {
      app,
      form,
      sActiveId,
      dataList,
      sId,
      disabled,
      handleModalPane,
      handleSelectChange,
      dataName,
      dataType,
      onClose,
    };
    const {
      sParentId, sProcessName, sQuotationFormulaId, sWorkCenterId, sCostFormulaId,
    } = this.state;
    const {
      sProcessShort, sProcessUnit, iOrder, sProductionPaperFormulaId, sQuotationPaperFormulaId,
    } = this.state;
    const {
      bProduction, bQuotation, bAutoArrange, sProcessNo,
    } = this.state;
    const sParentIdProps = { showConfig: sParentId, ...childProps };
    const sProcessNoProps = { showConfig: sProcessNo, ...childProps };
    const sProcessNameProps = { showConfig: sProcessName, ...childProps };
    const sQuotationFormulaIdProps = { showConfig: sQuotationFormulaId, ...childProps };
    const sWorkCenterIdProps = { showConfig: sWorkCenterId, ...childProps };
    const sCostFormulaIdProps = { showConfig: sCostFormulaId, ...childProps };
    const sProcessShortProps = { showConfig: sProcessShort, ...childProps };
    const sProcessUnitProps = { showConfig: sProcessUnit, ...childProps };
    const iOrderProps = { showConfig: iOrder, ...childProps };
    const sProductionPaperFormulaIdProps = { showConfig: sProductionPaperFormulaId, ...childProps };
    const sQuotationPaperFormulaIdProps = { showConfig: sQuotationPaperFormulaId, ...childProps };
    const bProductionProps = { showConfig: bProduction, ...childProps };
    const bQuotationProps = { showConfig: bQuotation, ...childProps };
    const bAutoArrangeProps = { showConfig: bAutoArrange, ...childProps };
    return (
      <FormItem className={styles.searchMainForm}>
        <Row type="flex" style={{ height: expand ? 'auto' : '100px', overflow: 'hidden' }}>
          <Col
            span={6}
            order={sParentId.iOrder > 24 ? 24 : sParentId.iOrder}
            style={{ display: sParentId.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sParentId" showDefaultName="工序分类" {...sParentIdProps} />
          </Col>
          <Col
            span={6}
            order={sProcessNo.iOrder > 24 ? 24 : sProcessNo.iOrder}
            style={{ display: sProcessNo.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sProcessNo" showDefaultName="工序编号" {...sProcessNoProps} />
          </Col>
          <Col
            span={6}
            order={sProcessName.iOrder > 24 ? 24 : sProcessName.iOrder}
            style={{ display: sProcessName.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sProcessName" showDefaultName="工序名称" {...sProcessNameProps} />
          </Col>
          <Col
            span={6}
            order={sQuotationFormulaId.iOrder > 24 ? 24 : sQuotationFormulaId.iOrder}
            style={{ display: sQuotationFormulaId.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sQuotationFormulaId" showDefaultName="计价方式" {...sQuotationFormulaIdProps} />
          </Col>
          <Col
            span={6}
            order={sWorkCenterId.iOrder > 24 ? 24 : sWorkCenterId.iOrder}
            style={{ display: sWorkCenterId.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sWorkCenterId" showDefaultName="工作中心" {...sWorkCenterIdProps} />
          </Col>
          <Col
            span={6}
            order={sCostFormulaId.iOrder > 24 ? 24 : sCostFormulaId.iOrder}
            style={{ display: sCostFormulaId.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sCostFormulaId" showDefaultName="对应标准成本" {...sCostFormulaIdProps} />
          </Col>
          <Col
            span={6}
            order={sProcessShort.iOrder > 24 ? 24 : sProcessShort.iOrder}
            style={{ display: sProcessShort.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sProcessShort" showDefaultName="拼版名称" {...sProcessShortProps} />
          </Col>
          <Col
            span={6}
            order={sProcessUnit.iOrder > 24 ? 24 : sProcessUnit.iOrder}
            style={{ display: sProcessUnit.bVisible ? 'block' : 'none' }}
          >
            <Row>
              <Col span={14}>
                <ShowType sName="sProcessUnit" showDefaultName="计价单位" {...sProcessUnitProps} formItemLayout={halfformItemLayout} />
              </Col>
              <Col span={9}>
                <ShowType sName="iOrder" showDefaultName="序号" {...iOrderProps} formItemLayout={rightformItemLayout} />
              </Col>
            </Row>
          </Col>
          <Col
            span={6}
            order={sProductionPaperFormulaId.iOrder > 24 ? 24 : sProductionPaperFormulaId.iOrder}
            style={{ display: sProductionPaperFormulaId.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sProductionPaperFormulaId" showDefaultName="工单放张公式" {...sProductionPaperFormulaIdProps} />
          </Col>
          <Col
            span={6}
            order={sQuotationPaperFormulaId.iOrder > 24 ? 24 : sQuotationPaperFormulaId.iOrder}
            style={{ display: sQuotationPaperFormulaId.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sQuotationPaperFormulaId" showDefaultName="报价放张公式" {...sQuotationPaperFormulaIdProps} />
          </Col>
          <Col
            span={12}
            order={bProduction.iOrder > 24 ? 24 : bProduction.iOrder}
            style={{ display: bProduction.bVisible ? 'block' : 'none' }}
          >
            <Col span={5}>
              <ShowType sName="bProduction" showDefaultName="生产工艺" {...bProductionProps} formItemLayout={checkformItemLayout} />
            </Col>
            <Col span={5}>
              <ShowType sName="bQuotation" showDefaultName="报价工艺" {...bQuotationProps} formItemLayout={checkformItemLayout} />
            </Col>
            <Col span={5}>
              <ShowType sName="bAutoArrange" showDefaultName="自动排程" {...bAutoArrangeProps} formItemLayout={checkformItemLayout} />
            </Col>
          </Col>
          {reserveContent}
        </Row>
        <button className={styles.collapseA} onClick={this.handleToggle}>
          <span>{expand ? '缩略展示' : '显示全部'}</span><Icon type={expand ? 'up' : 'down'} />
        </button>
      </FormItem>
    );
  }
}

export default TabProbablyComponent;
